<template>
  <view class="content">
    <view class="flex">
      <view
        @click="select(i)"
        style="width: 50%"
        :class="active == i ? 'bg-' + color + ' ' + 'text-white' : ''"
        class="flex justify-center bor py-2"
        v-for="(item, i) in NavData"
        :key="i"
      >
        <text>{{ item.title }}</text>
      </view>
    </view>
    <view class="">
      <uni-forms
        ref="valiForm"
        :rules="rules"
        :modelValue="valiFormData"
        label-position="top"
        label-width="100px"
      >
        <uni-section title="申请人信息" type="line">
          <view class="example">
            <!-- 基础表单校验 -->

            <uni-forms-item
              label="申请人姓名"
              required
              name="Order_Financing_Name"
            >
              <uni-easyinput
                v-model.trim="valiFormData.Order_Financing_Name"
                placeholder="请输入申请人姓名"
              />
            </uni-forms-item>
            <uni-forms-item
              label="联系电话"
              required
              name="Order_Financing_Phone"
              label-width="100"
            >
              <uni-easyinput
                v-model.trim="valiFormData.Order_Financing_Phone"
                placeholder="请输入联系电话"
              />
            </uni-forms-item>
          </view>
        </uni-section>

        <uni-section title="融资申请信息" type="line">
          <view class="example">
            <!-- 基础表单校验 -->
            <uni-forms-item
              label="订单号"
              required
              name="Group_Purchasing_SerialNumber"
            >
              <uni-data-select
                v-model="orderid"
                :localdata="CategoryData"
                @change="change"
              ></uni-data-select>
            </uni-forms-item>
            <uni-forms-item
              label="商品"
              required
              name="Group_Purchasing_SerialNumber"
            >
              <uni-data-select
                @change="Change"
                :disabled="disabled"
                v-model="valiFormData.Group_Purchasing_SerialNumber"
                :localdata="range"
              ></uni-data-select>
            </uni-forms-item>
            <uni-forms-item
              label="求购量"
              required
              name="Order_Financing_Quantity"
              label-width="100"
            >
              <uni-number-box
                @change="changeNum"
                :max="Good.Residue_Quantity"
                :min="1"
                v-model="valiFormData.Order_Financing_Quantity"
                :step="Good.Starting_Quantity"
              />
            </uni-forms-item>
            <uni-forms-item
              label="还款期限"
              required
              name="Repayment_Date"
              label-width="100"
            >
              <uni-easyinput
                v-model.trim="valiFormData.Repayment_Date"
                placeholder="请输入还款期限(天)"
              />
            </uni-forms-item>
            <uni-forms-item
              label="还款金额"
              required
              name="Order_Financing_Amount"
              label-width="100"
            >
              <uni-easyinput
                v-model.trim="valiFormData.Order_Financing_Amount"
                placeholder="请输入还款金额"
              />
            </uni-forms-item>
          </view>
        </uni-section>
        <uni-section title="商品信息" type="line">
          <uni-table class="w-100" border stripe emptyText="暂无更多数据">
            <!-- 表头行 -->
            <uni-tr>
              <uni-th align="center">商品名</uni-th>
              <uni-th align="center">图片</uni-th>
              <uni-th align="center">总量</uni-th>
              <uni-th align="center">价格</uni-th>
              <uni-th align="center">单位</uni-th>
            </uni-tr>
            <!-- 表格数据行 -->
            <uni-tr>
              <uni-td align="center">{{ Good.Article_Name }}</uni-td>
              <uni-td align="center">
                <image
                  style="width: 100rpx; height: 100rpx"
                  :src="Domain_IMG + Good.Picture_URL"
                  mode=""
                ></image>
              </uni-td>
              <uni-td align="center">{{ Good.Residue_Quantity }}</uni-td>
              <uni-td align="center">￥{{ Good.Amount ?  Good.Amount :"" }}</uni-td>
              <uni-td align="center">{{
                Good.Article_Unit_SerialNumber
              }}</uni-td>
            </uni-tr>
          </uni-table>
        </uni-section>
        <uni-section title="备注" type="line">
          <view class="example">
            <!-- 基础表单校验 -->
            <uni-forms-item label="备注">
              <uni-easyinput
                type="textarea"
                v-model="valiFormData.Order_Financing_Notes"
              />
            </uni-forms-item>
            <button
              :disabled="disable"
              type="primary"
              @click="submit('valiForm')"
            >
              提交申请
            </button>
          </view>
        </uni-section>
      </uni-forms>
    </view>
  </view>
</template>

<script>
import times from "@/mixins/time.js";
const app = getApp();
export default {
  data() {
    return {
      color: uni.getStorageSync("ThemeColors")
        ? uni.getStorageSync("ThemeColors")
        : "green",
      active: 0,
      LoginUrl: "",
      NavData: [
        {
          title: "订单融资",
        },
        {
          title: "抵押融资",
        },
      ],
      Domain_IMG: app.globalData.Domain_IMG,
      disabled: true,
      disable: false,
      CategoryData: [],
      orderid: "",
      startTime: "",
      // 校验表单数据
      valiFormData: {
        Unit_Price: "",
        Application_Date: "",
        Order_Financing_SerialNumber: "",
        Order_Financing_Name: "",
        Order_Financing_Phone: "",
        Group_Purchasing_SerialNumber: "",
        Order_Financing_Quantity: 1,
        Repayment_Date: "",
        Starting_Quantity: "",
        Unit_Quantity: "",
        Order_Financing_Amount: "",
        Order_Financing_Notes: "",
        Enterprise_Info_SerialNumber: uni.getStorageSync("enterprise"), //企业主键
      },
      range: [],
      Goods: [],
      Good: {},
      // 校验规则
      rules: {
        Order_Financing_Name: {
          rules: [
            {
              required: true,
              errorMessage: "不能为空",
            },
          ],
        },
        Enterprise_Name: {
          rules: [
            {
              required: true,
              errorMessage: "不能为空",
            },
          ],
        },
        Enterprise_Address: {
          rules: [
            {
              required: true,
              errorMessage: "不能为空",
            },
          ],
        },
        Order_Financing_Phone: {
          rules: [
            {
              required: true,
              errorMessage: "不能为空",
            },
            {
              format: "number",
              errorMessage: "手机号只能输入数字",
            },
            {
              pattern: /^1[3-9]\d{9}$/,
              errorMessage: "手机号不合法！",
            },
          ],
        },
        Picture_URL: {
          rules: [
            {
              required: true,
              errorMessage: "不能为空",
            },
          ],
        },
        Group_Purchasing_SerialNumber: {
          rules: [
            {
              required: true,
              errorMessage: "不能为空",
            },
          ],
        },
        Order_Financing_Quantity: {
          rules: [
            {
              required: true,
              errorMessage: "不能为空",
            },
            {
              format: "number",
              errorMessage: "数量只能输入数字",
            },
          ],
        },
        Repayment_Date: {
          rules: [
            {
              required: true,
              errorMessage: "不能为空",
            },
            {
              format: "number",
              errorMessage: "期限只能输入数字",
            },
          ],
        },
        Order_Financing_Amount: {
          rules: [
            {
              required: true,
              errorMessage: "不能为空",
            },
            {
              format: "number",
              errorMessage: "金额只能输入数字",
            },
          ],
        },
        Order_Financing_Notes: {
          rules: [
            {
              required: true,
              errorMessage: "不能为空",
            },
          ],
        },
      },
    };
  },
  onLoad() {
    this.valiFormData.Order_Financing_Name = uni.getStorageSync("username");
    this.valiFormData.Order_Financing_Phone = uni.getStorageSync("use");
    this.getCategoryData();
    this.startTime = times.nowtime();
    let pages = getCurrentPages();
    this.LoginUrl = pages[pages.length - 1].$page.fullPath;
  },
  methods: {
    select(i) {
      this.active = i;
    },
    change() {
      this.disabled = false;
      this.getOrderid(this.orderid);
    },
    Change(e) {
      console.log(this.Goods);
      this.Goods.forEach((item) => {
        if (item.Group_Purchasing_SerialNumber == e) {
          this.Good = item;
        }
      });
      this.Good.Residue_Quantity = Number(this.Good.Residue_Quantity);
      this.Good.Unit_Quantity = Number(this.Good.Unit_Quantity);
      this.Good.Starting_Quantity = Number(this.Good.Starting_Quantity);
      console.log(this.Good);
    },
    changeNum() {
      if (this.Good.Amount != void 0) {
        this.valiFormData.Order_Financing_Amount =
          this.valiFormData.Order_Financing_Quantity * this.Good.Amount;
      }
    },
    getCategoryData() {
      uni.request({
        //获取到所有类别
        url: app.globalData.Domain_Name + "/GoodsFileInquiry",
        header: {
          "Content-Type": "application/x-www-form-urlencoded",
        },
        method: "POST",
        data: {
          Data: "category",
        },
        success: (res) => {
          console.log(res.data);
          res.data.forEach((item) => {
            this.CategoryData.push({
              text: item.Category_Name,
              value: item.Category_SerialNumber,
            });
          });
        },
      });
    },
    getOrderid(orderid) {
      let token = uni.getStorageSync("token");
      uni.request({
        //获取到所有品
        url: app.globalData.Domain_Name + "/getFinanceGroupAll?token=" + token,
        header: {
          "Content-Type": "application/x-www-form-urlencoded",
        },
        method: "POST",
        data: {
          Category_SerialNumber: orderid,
        },
        success: (res) => {
          console.log(res.data);
          if (res.header.redirect == "REDIRECT") {
            uni.showModal({
              title: "登录已失活",
              content: "系统检测到您未登录或登录超时",
              cancelText: "暂不登录",
              confirmText: "去登陆",
              success(res) {
                if (res.cancel) {
                  uni.switchTab({
                    url: "/pages/index/index",
                  });
                }
                if (res.confirm) {
                  uni.navigateTo({
                    url: "/pages/My/Login?LoginUrl=" + this.LoginUrl,
                  });
                }
              },
            });
            return;
          }
          if (res.data.Data.length == 0) {
            uni.showToast({
              title: "该类暂无商品",
              icon: "none",
            });
            this.range = [];
            return;
          } else {
            this.Goods = res.data.Data;
            res.data.Data.forEach((item) => {
              this.range.push({
                text: item.Group_Purchasing_Name,
                value: item.Group_Purchasing_SerialNumber,
              });
            });
          }
        },
      });
    },
    submit(ref) {
      this.$refs[ref]
        .validate()
        .then((res) => {
          uni.showLoading({
            title: "提交中",
          });
          this.disable = true;
          let token = uni.getStorageSync("token");
          this.valiFormData.Application_Date = times.nowtime();
          this.valiFormData.Unit_Price = this.Good.Amount;
          this.valiFormData.Starting_Quantity = this.Good.Starting_Quantity;
          this.valiFormData.Unit_Quantity = this.Good.Unit_Quantity;
          console.log(this.valiFormData);
          uni.request({
            //获取所有招标
            url: app.globalData.Domain_Name + "/getAddAction",
            header: {
              "Content-Type": "application/x-www-form-urlencoded",
            },
            method: "POST",
            // json转字符串 传数据{}
            data: {
              Data: JSON.stringify({
                order_financing_info: [this.valiFormData],
              }),
              token,
            },
            success: (res) => {
              console.log(res.data);
              uni.hideLoading();
              this.disable = false;
              if (res.data.Status == "success") {
                uni.showToast({
                  title: `提交成功`,
                });
              } else {
                uni.showToast({
                  title: `提交失败`,
                });
              }
            },
          });
        })
        .catch((err) => {
          console.log("err", err);
        });
    },
  },
};
</script>

<style lang="scss">
.content {
  padding: 20rpx;
  background-color: rgb(250, 250, 250);
}
.activebor {
  background-color: #fc7c08;
  color: #fff;
  transition: all 0.5s;
}
.example {
  padding: 15px;
  background-color: #fff;
}

.segmented-control {
  margin-bottom: 15px;
}

.button-group {
  margin-top: 15px;
  display: flex;
  justify-content: space-around;
}

.form-item {
  display: flex;
  align-items: center;
}

.button {
  display: flex;
  align-items: center;
  height: 35px;
  margin-left: 10px;
}

.center {
  width: 1200px;
  margin: auto;
}
</style>
